<template>
  <div class="container">
    <Tag :color="randomColor()" class="container-tag">
      <Icon :icon="props.icon"  size="24" class="container-tag-icon" />
    </Tag>
    <span class="container-span">{{ props.label }}</span>
  </div>
</template>

<script setup name="shortcut">
  import { Tag } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  const props = defineProps({
    icon: {
      type: String,
      default: () => 'menu-outlined',
      required: false
    },
    label: {
      type: String,
      default: () => '快捷方式',
      required: false
    },
    color: {
      type: String,
      default: () => '',
      required: false
    }
  })
  // 颜色列表
  const colorList = ['#7265E6', '#FFBF00', '#00A2AE', '#F56A00', '#1677FF', '#606D80']
  // 获取随机颜色
  const randomColor = () => {
    if (props.color) {
      return props.color
    }
    return colorList[randomNum(0, colorList.length - 1)]
  }
  // 获取minNum到maxNum内的随机数
  const randomNum = (minNum, maxNum) => {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10)
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      default:
        return 0
    }
  }
</script>

<style scoped>
.container {
  height: 60px;
  /*border:1px solid var(--border-color-split);*/
  border-radius: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  /*实现渐变（时间变化效果）*/
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.container-tag {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.container-tag-icon {
  font-size: 25px;
}
.container-span {
  max-width: 60%;
  font-weight: 500;
}
</style>
